<div>
    <ion-header>
        <ion-toolbar color="care">
            <ion-title>{{title | translate}}</ion-title>
            <ion-buttons slot="end">
                <ion-button (click)="onModelClose()">
                    <ion-icon name="close"></ion-icon>{{ 'Close' | translate}}
                </ion-button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>

    <div>
        <ion-list>
            <ion-item [detail]="true" *ngFor="let item of itemArray" (click)="onItemSelect(item)" [disabled]="item.disabled">
                <ion-label>{{item.name | translate}}</ion-label>
                <ion-text color="medium" slot="end"><p>{{item.label}}</p></ion-text>
            </ion-item>
        </ion-list>

        <div padding-horizontal>
            <ion-button color="care" expand="block" (click)="onRegionConfirm()">{{ 'Confirm' | translate }}</ion-button>
        </div>
    </div>
</div>
